<template>
	<view class="pageBg">
		<form @submit="formSubmit">
			<view class="form">
				<view class="line flex">
					<view class="label">收件人</view>
					<input type="text" name="contact" class="inp" placeholder="请填写收件人" v-model="form.contact" />
				</view>
				<view class="line flex">
					<view class="label">手机号</view>
					<input type="text" name="telephone" class="inp" placeholder="请填写手机号" v-model="form.telephone" />
				</view>
				<picker range-key="name" class="regionChecked" mode="multiSelector" @columnchange="columnchange" @change="addRegion" :range="array">
					<view class="line flex">
						<view class="label">收货地址</view>
						<view class="inp" v-show="form.province">{{ form.province + form.city + form.district }}</view>
						<view class="inp placeholder" v-show="!form.province">请选择</view>
						<text class="icon cuIcon-right"></text>
					</view>
				</picker>
				<view class="line flex no-border">
					<view class="label">详细地址</view>
					<textarea name="address" class="inp textarea" maxlength="-1" auto-height placeholder="请输入详细地址" v-model="form.address"></textarea>
				</view>
			</view>
			<view class="flex defaultbox" @click="defaultCheck">
				<text class="icon cuIcon-round" v-show="form.is_default !== 1"></text>
				<image class="icon cuIcon-round" src="/static/images/my/success.png" v-show="form.is_default === 1" mode=""></image>
				<text>默认地址</text>
			</view>
			<button form-type="submit" class="btnview">
				{{ btn_text }}
			</button>
		</form>
	</view>
</template>

<script>
	import ddJson from '@/utils/dd.json';
	import graceChecker from '@/utils/graceChecker.js';
	export default {
		data() {
			return {
				array: [[], [], []],
				btn_text: '确认添加',
				form: {
					contact: null,
					telephone: null,
					code: null,
					province: null,
					city: null,
					district: null,
					address: null,
					is_default: 0,
				},
			};
		},
		onLoad(e) {
			this.array = [ddJson.province, ddJson.city[ddJson.province[0].id], ddJson.city[ddJson.city[ddJson.province[0].id][0].id]];
			console.log(e);
			this.type = e.type;
			if (e.type === 'edit') {
				uni.setNavigationBarTitle({
					title: '编辑地址',
				});
				this.btn_text = '确认修改';
				this.form = JSON.parse(e.item);
			}
		},
		methods: {
			formSubmit(e) {
				console.log(e.detail.value.contact);
				if (e.detail.value.contact === '' || !e.detail.value.contact) {
					this.showToastMsg('请填写收件人');
					return;
				}
				var rule = [
					{ name: 'contact', checkType: 'string', checkRule: '1,15', errorMsg: '收件人长度最多15位' },
					{ name: 'telephone', checkType: 'phoneno', checkRule: '', errorMsg: '请填写正确的手机号码' },
					{ name: 'address', checkType: 'string', checkRule: '1,999', errorMsg: '请填写详细地址' },
				];
				//进行表单检查
				var formData = e.detail.value;
				console.log(formData);
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					if (this.type == 'add') {
						this.$api.AddUserAddress(this.form).then((res) => {
							if (res.code == 1) {
								this.back();
							}
							this.showToastMsg(res.msg);
						});
					} else {
						this.$api.EditOneAddress(this.form).then((res) => {
							if (res.code == 1) {
								this.back();
							}
							this.showToastMsg(res.msg);
						});
					}
				} else {
					uni.showToast({ title: graceChecker.error, icon: 'none' });
				}
			},
			defaultCheck(e) {
				this.form.is_default = this.form.is_default === 0 ? 1 : 0;
			},
			columnchange(e) {
				switch (e.detail.column) {
					case 0:
						this.array[1] = ddJson.city[ddJson.province[e.detail.value].id];
						break;
					case 1:
						this.array[2] = ddJson.city[this.array[1][e.detail.value].id];
						break;
				}
				this.$forceUpdate();
			},
			addRegion(e) {
				this.form.province = this.array[0][e.detail.value[0]].name;
				this.form.province_id = this.array[0][e.detail.value[0]].id;
				this.form.city = this.array[1][e.detail.value[1]].name;
				this.form.city_id = this.array[1][e.detail.value[1]].id;
				this.form.district = this.array[2][e.detail.value[2]].name;
				this.form.district_id = this.array[2][e.detail.value[2]].id;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.form {
		overflow: hidden;
		width: $connet-width;
		margin: $margin-width auto;
		background: $content-bg-colcor;
		border-radius: $border-radius;

		.line {
			margin: 0 $margin-width;
			line-height: 100rpx;
			justify-content: flex-start;
			border-bottom: 1rpx solid $search-border-color;
			flex-wrap: nowrap;
			white-space: nowrap;

			.label {
				font-size: $uni-font-size-12;
				width: 180rpx;
			}

			.inp {
				font-size: $uni-font-size-14;
				min-height: 100rpx;
				margin: 0;
				padding: 0;
				width: 500rpx;
			}

			.textarea {
				// line-height: 50rpx;
				padding-top: 30rpx;
			}

			.placeholder {
				color: $placeholder-colcor;
			}

			.icon {
			}

			// &:last-child {
			// 	border: none;
			// }
		}
	}

	.defaultbox {
		width: $connet-width;
		font-size: $uni-font-size-12;
		padding: $margin-width;
		line-height: $uni-font-size-16;
		.icon {
			font-size: $uni-font-size-16;
			width: $uni-font-size-16;
			height: $uni-font-size-16;
			margin-right: 5rpx;
			border: 1rpx solid $price-color;
			border-radius: 50%;
		}
		text {
			margin-right: 10rpx;
		}
	}
	.btnview {
		width: 690rpx;
		height: 80rpx;
		margin: 70rpx auto;
		line-height: 80rpx;
		border-radius: $border-radius;
		font-size: 24rpx;
	}
</style>
